<template>
    <h3>this.$store</h3>
    <div>
        <div class="hello">
            <div>数量 state.num {{ $store.state.num }}</div>
            <div>商品价格：100</div>
            <div>商品总价 getters：{{ $store.getters.totalPrice }}</div>
        </div>
        <button @click="btn">增加</button>
        <button @click="btn2">增加2</button>
        <button @click="btn3">请求段子</button>
        <p v-for="(item,i) in $store.state.dzlist" :key="i">{{ item.text }}</p>
    </div>
    <hr />

    <h3>...map</h3>
    <div>
        <div>数量 mapState num:{{ pruductNum }}</div>
        <div>商品价格：100</div>
        <div>商品总价 getters：{{ totalPrice }}</div>
        <button @click="setNum(1)">增加+1</button>
        <button @click="setNum2(2)">增加+2</button>
        <button @click="getDZ()">请求段子</button>
    </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
    name: 'HelloWorld',
    props: {
        msg: String
    },
    computed: {
        ...mapState(['num']),
        ...mapState({
            pruductNum: (state) => state.num
        }),
        ...mapGetters(['totalPrice'])
    },
    methods: {
        ...mapMutations(['setNum', 'setNum2']),
        ...mapActions(['getDZ']),
        btn() {
            this.$store.commit('setNum') // 没有参数 mapMutations
        },
        btn2() {
            this.$store.commit('setNum2', 2) // 有参数  mapMutations
        },
        btn3() {
            // this.$store.dispatch('getDZ')
            this.getDZ()
        }
    }
}
</script>
